<link rel="stylesheet" href="<%= basePath%>/modules/student/css/style.css">

<script type="application/javascript" src="<%= basePath%>/lib/jquery.min.js"></script>
<script type="application/javascript" src="<%= basePath%>/lib/sui.min.js"></script>
<script type="application/javascript" src="<%= basePath%>/public/js/util.js"></script>

<div class="body_scroll">
    <div class="frame-content">
        <ul class="info_list">
            <li class="li_header">姓名：<%= student.name %>&nbsp;&nbsp;&nbsp;&nbsp;学号：<%= student.sid %></li>
            <li class="li_info">
                <span class="iconfont" style="color: #5396f1">&#xe61f;</span>
                <span style="font-size: 14px">学期：</span>
                <span class="sui-dropdown dropdown-bordered table_header select">
                <span class="dropdown-inner">
                <a role="button" data-toggle="dropdown" class="dropdown-toggle" id="term_select">
                    <input type="hidden" value="<% if ( terms.length ) { %><%= terms[0].id%><% } %>">
                    <i class="caret"></i>
                    <span>
                        <% if ( terms.length ) { %>
                        <%= terms[0].name%>
                        <% } %>
                    </span>
                </a>
                <ul role="menu" aria-labelledby="status_drop" class="sui-dropdown-menu">
                    <% terms.forEach(function(term){%>
                    <li role="presentation"><a role="menuitem" tabindex="-1" value="<%= term.id%>"><%=term.name%></a></li>
                    <%})%>
                </ul>
                </span>
                </span>
                <a class="btn-search sui-btn btn-primary recording_search_btn">查询</a>
            </li>
            <%
            student.attendPercent = 0;
            if ( student.attendCount + student.totalAbsence > 0 ) {
                student.attendPercent = student.attendCount / ( student.attendCount + student.totalAbsence);
            }
            %>
            <li class="li_footer">
                <div class="table_header_class_detail">
                    出勤次数:<%= student.attendCount %>
                </div>
                <div class="table_header_class_detail">
                    早退次数:<%= student.earlyCount %>
                </div>
                <div class="table_header_class_detail alert">
                    旷课次数:<%= student.absenceCount %>
                </div>
                <div class="table_header_class_detail">
                    迟到次数:<%= student.lateCount %>
                </div>
                <div style="clear: both"></div>
            </li>
            <% if (terms.length > 0) {%>
            <li class="li_footer" data-id="student_date">
            </li>
            <%}%>
        </ul>
    </div>
</div>

<script>
    var allTerms = [];
    <% terms.forEach(function(myTerm){%>
    allTerms.push({
        name: '<%= myTerm.name%>',
        id: '<%= myTerm.id%>',
        startTime: '<%= myTerm.startTime%>',
        endTime: '<%= myTerm.endTime%>'
    });
    <%})%>

    Attendances = JSON.parse('<%=JSON.stringify(attendanceObjects);%>'.replace(new RegExp(/&#34;/g), '"'));
    console.log(Attendances);
</script>

<script type="application/javascript" src="<%= basePath%>/modules/student/js/student.js"></script>

<script>
    $(document).ready(function () {

        var queryString = location.search;
        var parameters = Request.parseQueryString(queryString);

        var attendStatus = {
            Created: 0,
            Attended: 1,
            AdditionalAttend: 2,
            Rest: 3,
            Absent: -1,
            Late: -2,
            Early: -3
        };

        function getAttendStatus(status) {
            if (status == attendStatus.Created) {
                return '--';
            }
            if (status == attendStatus.Attended) {
                return '正常出勤';
            }
            if (status == attendStatus.AdditionalAttend) {
                return '补录出勤';
            }
            if (status == attendStatus.Rest) {
                return '请假';
            }
            if (status == attendStatus.Absent) {
                return '旷课';
            }
            if (status == attendStatus.Late) {
                return '迟到';
            }
            if (status == attendStatus.Early) {
                return '早退';
            }
        }

        function isNormalAttend(attendDay) {
            for (var k=0; k<attendDay.values.length; k++) {
                var attendValue = attendDay.values[k];
                if (attendValue.enterStatus < 0 || attendValue.exitStatus < 0) {
                    return false;
                }
            }
            return true;
        }

        function getAttendValues(id) {
            for (var i=0; i<Attendances.length; i++) {
                if (id == Attendances[i].id) {
                    return Attendances[i].values;
                }
            }
        }

        function getCurrentTerm(id) {
            for (var i=0; i<allTerms.length; i++) {
                if (allTerms[i].id == id) {
                    return allTerms[i];
                }
            }
        }

        //写入万年历
        if (allTerms.length > 0) {
            var currentTerm = allTerms[0];
            if (parameters.term) {
                currentTerm = getCurrentTerm(parameters.term);
            }
            var startTime = new Date(currentTerm.startTime);
            var endTime = new Date(currentTerm.endTime);

            var studentDate = $('[data-id = "student_date"]');
            var monthCount = 1;
            while(1) {
                var lastDay = getTheLastDay(startTime);
                console.log(lastDay);
                var data_id = 'student_month_' + monthCount;

                var myStartTime = formatDate(startTime);
                if (lastDay.getTime() >= endTime.getTime()) {
                    studentDate.append('<div class="student_date_inline" data-month="'+myStartTime.substring(0, myStartTime.length - 3)+'" data-id="'+ data_id + '"></div>');
                    $('[data-id = "'+ data_id + '"]').datepicker({
                        startDate: formatDate(startTime),
                        size: 'small',
                        todayHighlight: false,
                        endDate: formatDate(endTime)
                    });
                    break;
                }
                studentDate.append('<div class="student_date_inline" data-month="'+myStartTime.substring(0, myStartTime.length - 3)+'" data-id="'+ data_id + '"></div>');
                $('[data-id = "'+ data_id + '"]').datepicker({
                    startDate: formatDate(startTime),
                    size: 'small',
                    todayHighlight: false,
                    endDate: formatDate(lastDay)
                });

                lastDay.setDate(lastDay.getDate() + 1);
                startTime = new Date(lastDay);
            }

            //设置所有的date的header样式
            var allDateHeader = document.getElementsByClassName('datepicker-switch');
            for (var i=0; i<allDateHeader.length; i++) {
                var dateHeader = allDateHeader[i];
                dateHeader.setAttribute('colspan', '7');
            }

            $('.datepicker-switch').click(function(event) {
                event.stopPropagation();
            });

            $('.day').click(function(event){
                event.stopPropagation();
            });

            disableFutureDay();

            $('.day.disabled').css({'opacity': '0.3'});

            var normalDay = $('[class!="new disabled day"][class!="old disabled day"][class!="disabled day"][class!="day disabled"].day');
            for (var j=0; j<Attendances.length; j++) {
                $(normalDay[j]).attr('data-id', Attendances[j].id);
                if (!isNormalAttend(Attendances[j])) {
                    $(normalDay[j]).css({'background-color': 'red'});
                }
            }
            normalDay.click(function (event) {
                var string = '<tr><th>时间</th><th>进校门</th><th>出校门</th></tr>';
                if (Attendances.length > 0) {
                    var values = getAttendValues($(event.currentTarget).attr('data-id'));
                    string = string + '<tr><td>上午</td><td>' + getAttendStatus(values[0].enterStatus) + '</td><td>' + getAttendStatus(values[0].exitStatus) + '</td>';
                    string = string + '<tr><td>下午</td><td>' + getAttendStatus(values[1].enterStatus) + '</td><td>' + getAttendStatus(values[1].exitStatus) + '</td>';
                    string = string + '<tr><td>晚上</td><td>' + getAttendStatus(values[2].enterStatus) + '</td><td>' + getAttendStatus(values[2].exitStatus) + '</td>';
                }
                else {
                    string += '<tr><td>上午</td><td>--</td><td>--</td></tr>';
                    string += '<tr><td>下午</td><td>--</td><td>--</td></tr>';
                    string += '<tr><td>晚上</td><td>--</td><td>--</td></tr>';
                }
                $('#modal-table').html(string);
                $("#myModal").modal('show');
            });

        }

        $('.btn-search').click(function () {
            var selectedTerm = $('#term_select').find('input').val();
            var req = new Request('/student/index/today', {
                term: selectedTerm
            });
            location.href = req.url;
        });

    });
</script>

<div id="myModal" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                <h4 id="myModalLabel" class="modal-title">当日详情</h4>
            </div>
            <div class="modal-body">
                <table class="sui-table attend_table" id="modal-table">
                    <tr>
                        <th>时间</th>
                        <th>进校门</th>
                        <th>出校门</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
